<!-- 开票信息 -->
<template>
  <div class="card">
    <div class="card-header">
      <div class="common-sub-title">开票信息</div>
      <el-button plain @click="handleSave">保存</el-button>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      hide-required-asterisk>
      <el-form-item label=" ">
        <el-radio-group v-model="ruleForm.types">
          <el-radio value="1">委托代付</el-radio>
          <el-radio value="2">代付方开票</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="预估保费">
        <el-input placeholder="自动测算仅供参考,已最终实际金额为准" disabled />
      </el-form-item>
      <el-form-item label="发票类型" prop="type">
        <el-select v-model="ruleForm.type" placeholder="请选择" style="width: 100px;">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item label="公司名称" prop="companyName">
          <el-input v-model.trim="ruleForm.companyName" placeholder="请输入企业名称" />
        </el-form-item>
        <el-form-item label="税号" prop="taxpayerNumber">
          <el-input v-model.trim="ruleForm.taxpayerNumber" placeholder="请输入纳税人识别号" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="公司地址" prop="companyAddress">
          <el-input v-model.trim="ruleForm.companyAddress" placeholder="请输入公司地址" />
        </el-form-item>
        <el-form-item label="公司电话" prop="companyPhone">
          <el-input v-model.trim="ruleForm.companyPhone" placeholder="请输入公司电话" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="开户行" prop="openName">
          <el-input v-model.trim="ruleForm.openName" placeholder="请输入开户行名称" />
        </el-form-item>
        <el-form-item label="开户行账号" prop="openNumber">
          <el-input v-model.trim="ruleForm.openNumber" placeholder="请输入开户行账号" />
        </el-form-item>
      </el-row>
      <el-form-item label="备注说明" prop="remark">
        <el-input v-model.trim="ruleForm.remark" placeholder="请输入备注说明" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import Upload from './upload.vue'

// 发票类型
const typeOptions = reactive([
  { label: '普票', value: '1' },
  { label: '专票', value: '2' }
])

const ruleForm = reactive({
  // 发票类型(专票、普票)
  type: '2',
  // 公司名称
  companyName: '',
  // 税号
  taxpayerNumber: '',
  // 公司地址
  companyAddress: '',
  // 公司电话
  companyPhone: '',
  // 开户行
  openName: '',
  // 开户行账号
  openNumber: '',
  // 备注说明
  remark: ''
})

const rules = reactive({
  type: [{ required: true, message: '请选择发票类型' }],
  companyName: [{ required: true, message: '请输入企业名称' }],
  taxpayerNumber: [{ required: true, message: '请输入纳税人识别号' }],
  companyAddress: [{ required: true, message: '请输入公司地址' }],
  companyPhone: [{ required: true, message: '请输入公司电话' }],
  openName: [{ required: true, message: '请输入开户行名称' }],
  openNumber: [{ required: true, message: '请输入开户行账号' }],
  remark: [{ required: true, message: '请输入备注说明' }],
})

// 表单校验
const ruleFormRef = ref(null)
function validateForm() {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate(valid => {
      if (valid) {
        resolve(ruleForm)
      }
    })
  })
}

// 保存
function handleSave(){
  validateForm()
  .then(res=>{
    console.log(res,'保存')
  })
}

defineExpose({
  validateForm
})
</script>

<style lang="scss" scoped>
</style>
